<!-- 登录 -->
<template>
  <view class="login" :style="loginStyle">
    <view class="login-header">
      <text @click="changeLoginType()">{{ loginType }}</text>
    </view>
    <view v-if="isPwd">
      <view class="account">
        <uni-easyinput
          prefixIcon="person"
          v-model="username"
          placeholder="用户名/手机号"
          :inputBorder="false"
          :styles="{ color: '#fff' }"
        />
      </view>
      <view class="password">
        <uni-easyinput
          prefixIcon="locked"
          v-model="password"
          placeholder="密码"
          type="password"
          :inputBorder="false"
          :styles="{ color: '#fff' }"
        />
      </view>
    </view>
    <view v-else>
      <view class="account">
        <uni-easyinput
          prefixIcon="phone"
          v-model="username"
          placeholder="手机号"
          type="number"
          :inputBorder="false"
          :styles="{ color: '#fff' }"
        />
      </view>
      <view class="password">
        <uni-easyinput
          prefixIcon="locked"
          v-model="password"
          placeholder="验证码"
          type="number"
          :maxlength="6"
          :inputBorder="false"
          :styles="{ color: '#fff' }"
        />
        <button v-show="!showTime" @click="getSmsCode()">获取验证码</button>
        <button v-show="showTime">{{ time }} s</button>
      </view>
    </view>
    <view class="ua_xy" :class="[{ ua_xyhover: isRead }]">
      <view class="ck" @click="changeXy()">
        <view class="ckin" />
      </view>
      <text @click="changeXy()">我已阅读并同意</text>
      <navigator :url="config.route.register_agreement" class="bn">《注册协议》</navigator>
      和
      <navigator :url="config.route.privacy_policy" class="bn">《隐私政策》</navigator>
    </view>
    <view v-if="showTip" class="tooltip"> 请勾选协议 </view>
    <view class="submit">
      <button @click="submit()">登录</button>
    </view>
    <view class="register">
      <view @click="toregister()">立即注册</view>
      <view @click="toforget()">忘记密码?</view>
    </view>
    <view class="divider">
      <aster-divider text="其他登录方式" />
    </view>
    <view class="other">
      <a href="#" class="item" @click="toother('zfb')">
        <image src="../../static/images/login/zfb.png" />
        <text>支付宝</text>
      </a>
      <a href="#" class="item" @click="toother('wx')">
        <image src="../../static/images/login/weixin.png" />
        <text>微信</text>
      </a>
      <a href="#" class="item" @click="toother('qq')">
        <image src="../../static/images/login/qq.png" />
        <text>QQ</text>
      </a>
      <a href="#" class="item" @click="toother('wb')">
        <image src="../../static/images/login/weibo.png" />
        <text>微博</text>
      </a>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { HideLoading, Loading, Toast } from '@/utils/uniapi/prompt';
  import { onBeforeUnmount, computed, reactive, ref } from 'vue';
  import AsterDivider from '@/components/common/aster-divider.vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { router } from '@/utils/router';
  import { sendCode } from '@/services/api/user/login';
  import { LoginParamModel } from '@/services/model/loginModel';
  import { isEmpty } from '@/utils/is';
  import config from '@/utils/config';
  import { encryptByMd5 } from '@/utils/cipher';
  import { useAuthStore } from '@/store/modules/auth';
  import { ResultEnum } from '@/enums/httpEnum';

  const authStore = useAuthStore();

  const loginStyle = reactive({
    'background-image': "url('../../static/images/login-bg.png')",
    'background-position': 'center center',
    'background-size': 'cover',
    'background-repeat': 'no-repeat',
  });

  /** 是否密码登录 */
  const isPwd = ref<Boolean>(true);
  /** 登录方式 */
  const loginType = computed(() => {
    return isPwd.value ? '短信快捷登录' : '帐号密码登录';
  });
  /** 用户名 */
  const username = ref<string>('lld');
  /** 密码 */
  const password = ref<string>('123456');
  /** 显示验证码倒计时 */
  const showTime = ref<boolean>(false);
  /** 验证码倒计时 */
  const time = ref<number>(60);
  /** 是否已读协议 */
  const isRead = ref<boolean>(true);
  /** 协议未读提示 */
  const showTip = ref<boolean>(false);
  const timer = ref();
  /** 待提交参数 */
  const queryParams = reactive<LoginParamModel>({
    username: username.value,
    password: password.value,
    uuid: '123',
    captcha: '123',
  });

  /** 登录方式change事件 */
  const changeLoginType = () => {
    isPwd.value = !isPwd.value;
  };

  /** 获取验证码 */
  const getSmsCode = () => {
    if (isEmpty(username.value)) {
      Toast('请输入手机号');
      return;
    }
    sendCode(username.value).then(({ data }) => {
      if (data.code == ResultEnum.SUCCESS) {
        showTime.value = true;
        setIntervalFun();
      } else {
        Toast(data.msg);
      }
    });
  };

  /** 协议 */
  const changeXy = () => {
    isRead.value = !isRead.value;
    if (isRead.value) {
      showTip.value = false;
    }
  };

  /** 登录 */
  const submit = () => {
    if (!isRead.value) {
      showTip.value = true;
      return;
    }
    const validate = validateForm();
    if (!validate) return;
    queryParams.username = username.value;
    queryParams.password = password.value;
    // 密码加密
    // queryParams.password = encryptByMd5(password.value);
    Loading('');
    authStore.login(queryParams).then(({ data }) => {
      if (data.code == ResultEnum.SUCCESS) {
        timer.value = setInterval(() => {
          HideLoading();
          router.reLaunch(config.route.home);
        }, 1500);
      } else {
        Toast(data.msg);
      }
    });
  };

  /** 表单校验 */
  const validateForm = () => {
    if (isEmpty(username.value)) {
      Toast('请输入用户名/手机号');
      return false;
    }
    if (isEmpty(password.value)) {
      if (isPwd.value) {
        Toast('请输入密码');
      } else {
        Toast('请输入验证码');
      }
      return false;
    }
    return true;
  };

  /** 注册 */
  const toregister = () => {
    router.push(config.route.login_register);
  };

  /** 忘记密码 */
  const toforget = () => {
    router.push(config.route.login_forget);
  };

  /** 跳转 */
  const toother = (type: string) => {
    Toast(type + ': 暂未接入');
  };

  /** 添加定时器 */
  const setIntervalFun = () => {
    let interval = setInterval(function () {
      time.value--;
      uni.setStorage({
        key: 'login_time',
        data: {
          time: time.value,
          date: new Date().getTime(),
        },
        success: function () {},
      });
      if (time.value <= 0) {
        clearInterval(interval);
        showTime.value = false;
        time.value = 60;
      }
    }, 1000);
  };

  onLoad(() => {
    uni.getStorage({
      key: 'login_time',
      success: function (res) {
        let difDate = (new Date().getTime() - res.data.date) / 1000;
        if (res.data.time - Math.round(difDate) > 0) {
          time.value = res.data.time - Math.round(difDate);
          showTime.value = true;
          setIntervalFun();
        } else {
          showTime.value = false;
          time.value = 60;
          uni.setStorage({
            key: 'login_time',
            data: {
              time: 0,
              date: new Date().getTime(),
            },
            success: function () {},
          });
        }
      },
    });
  });

  /** 页面销毁前清除定时器 */
  onBeforeUnmount(() => {
    clearInterval(timer.value);
  });
</script>
<style lang="scss" scoped>
  .login {
    color: #fff;
    padding: 270rpx 66rpx 0;
    position: relative;
    height: 100vh;

    input {
      color: #fff;
    }
  }

  .login-header {
    width: 100%;

    text {
      display: flex;
      justify-content: flex-end;
    }
  }

  .account {
    margin: 20rpx 0;
    border-bottom: 1px solid #f7f7f7;
  }

  .password {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #f7f7f7;
    margin: 20rpx 0;

    input {
      font-size: 32rpx;
    }

    button {
      width: 180rpx;
      color: #fff;
      display: inline-block;
      font-size: 28rpx;
      background-color: #ff6a6c;
      padding-left: 20rpx;
      padding-right: 20rpx;
    }
  }

  ::v-deep .uni-easyinput__content {
    background-color: unset !important;
  }

  .ua_xy {
    padding: 0 0 0 70rpx;
    line-height: 60rpx;
    position: relative;
    font-size: 24rpx;
  }
  .ua_xy .ck {
    width: 30rpx;
    height: 30rpx;
    border-radius: 100%;
    border: 1px solid #fff;
    position: absolute;
    left: 20rpx;
    top: 14rpx;
  }
  .ua_xy .ckin {
    width: 24rpx;
    height: 24rpx;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #00da9d;
    display: none;
  }
  .ua_xyhover .ckin {
    display: block;
  }
  .ua_xy .bn {
    display: inline-block;
    color: #00da9d;
    font-size: 26rpx;
    line-height: 56rpx;
  }

  .tooltip {
    display: inline-block;
    position: relative;
    z-index: 1;
    left: 0;
    background-color: #333;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    text-align: left;
    line-height: 16px;
    padding: 12px;
  }

  .submit {
    margin: 20rpx 0;

    button {
      background-color: #ff6a6c;
      color: #fff;
      font-size: 32rpx;
    }
  }

  .register {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #bbb;
    font-size: 12px;
  }

  .divider {
    margin-top: 200rpx;
  }

  .other {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;

    .item {
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      color: #a5a5a5;
      padding: 0 20rpx;

      image {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 10rpx;
      }
    }
  }
</style>
